<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<title id="title">C罗盛夏送清凉</title>
		<meta name="keywords" content="">
		<meta name="format-detection" content="telephone=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--清除默认样式-->
		<link rel="stylesheet" href="css/default.css" />
		<!--通用样式-->
		<link rel="stylesheet" href="css/common.css" />
		<!--插件样式-->
		<link rel="stylesheet" href="css/swiper.min.css" />
		<!--首页样式-->
		<link rel="stylesheet" href="css/index.css" />
		<!--rem插件js-->
		<script type="text/javascript" src="js/adaptive.js"></script>
		<script>
			window['adaptive'].desinWidth = 750;// 设计图宽度
		    window['adaptive'].maxWidth = 750;// 页面最大宽度 默认540
	        window['adaptive'].init();
		</script>
		
	</head>
	
    <!--音乐-->
    <span id="musicControl">
        <a id="mc_play" class="stop" onclick="play_music();">
            <audio id="musicfx" loop autoplay>
                <source src="music/Club-Foot.mp3" type="audio/mpeg">
            </audio>
        </a>
 	</span>
	<body class="">
		<!--内容-->
		<section class="container-main index swiper-container">
			<ul class="swiper-wrapper">
				
				<li class="swiper-slide page page1"></li>
				<li class="swiper-slide page page2"></li>
				<li class="swiper-slide swiper-container2">
					<ol class="swiper-wrapper">
						<li class="swiper-slide page page3">
							<div class="returnPage"></div>
						</li>
						<li class="page page4 swiper-slide">
							<div class="returnPage"></div>
						</li>
						<li class="swiper-slide page page5">
							<img src="images/1.jpg"  class="imgs">
							<h2 class="title">题目：<span>C罗是哪国人？</span></h2>
							
							<div class="answer-box">
								<label>A、巴西人</label><input type="radio" name="answer" value="0"/>
								<div class="mf-checkbox"></div>
							</div>
							<div class="answer-box">
								<label>B、葡萄牙人</label><input type="radio" name="answer" value="1"/>
								<div class="mf-checkbox"></div>
							</div>
							<div class="answer-box">
								<label>C、西班牙人</label><input type="radio" name="answer" value="2"/>
								<div class="mf-checkbox"></div>
							</div>
						 	<div class="answer-box">	
						 		<label>D、英格兰人</label><input type="radio" name="answer" value="3"/>
						 		<div class="mf-checkbox"></div>
						 	</div>
							
							<div class="nick-name">
								<label>您的昵称：</label>
								<input type="text" name="nickName" placeholder="请输入您的昵称" />
							</div>
							
							<input class="returnPage" type="submit" value="">
						</li>
					</ol>
				</li>
			</ul>
			<div class="arrow"></div>
			
			<!--弹窗-->
			<div class="layer-bg"></div>
			<div class="share-arrow"></div>
			<div class="layer-box">
				<div class="layer-close"></div>
				<span>点击右上角分享<br>告知大家一起参与</span>
			</div>
			
		</section>
		<!--内容End-->
		<!--jquery-->
		<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
		<!--页面滑动插件-->
		<script type="text/javascript" src="js/swiper.min.js"></script>
		<script>
			var mySwiper = new Swiper('.swiper-container', {
				effect: 'coverflow',
				direction: 'vertical',
				watchSlidesProgress:'true',
				coverflow: {
					rotate: 0,
					stretch: 0,
					depth: 60,
					modifier: 3,
					slideShadows: false
				},
				onSlideChangeStart: function(swiper){
					//判断滑动到了最后一个
			        if(swiper.progress==1){
			        	$(".arrow").fadeOut(300)
			        }else{
			        	$(".arrow").fadeIn(300)
			        }
			    }
			});
			
			var mySwiper2 = new Swiper('.swiper-container2', {
				swipeHandler : '.swipe-handler',
				onSlideChangeStart: function(swiper){
					//判断滑动到了最后一个
			        if(swiper.progress==0){
			        	mySwiper.unlockSwipes();
			        }else{
			        	mySwiper.lockSwipes()
			        }
			    }
			});
			
			var imgArry=["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg","images/6.jpg","images/7.jpg","images/8.jpg","images/9.jpg","images/10.jpg"]
			
			var subject=[
				{'title':['C罗是哪国人？'],'answer':['A、巴西人 ','B、西班牙人', 'C、葡萄牙人', 'D、英格兰人'],'rightKey':'2'},
				{'title':['以下哪位俄罗斯名模是C罗的前女友？'],'answer':['A、莎莎·彼伏瓦洛娃','B、纳塔利娅·沃佳诺娃', 'C、娜塔莎·波利', 'D、伊莉娜·沙伊克'],'rightKey':'3'},
				{'title':['C罗的球衣号码是？'],'answer':['A、11号','B、7号', 'C、10号', 'D、9号'],'rightKey':'1'},
				{'title':['以下哪个内衣品牌由C罗创办？'],'answer':['A、CR7','B、CK', 'C、C-IN2', 'D、Versace'],'rightKey':'0'},
				{'title':['C罗目前效力的球队是？'],'answer':['A、巴塞罗那','B、阿贾克斯', 'C、皇家马德里', 'D、本菲卡'],'rightKey':'2'},
				{'title':['C罗的孩子出生在哪一年？'],'answer':['A、2008','B、2010', 'B、2014', 'B、2015'],'rightKey':'1'},
				{'title':['以下哪位球员和C罗曾是CP？'],'answer':['A、卡卡','B、菲戈', 'B、菲戈', 'D、贝克汉姆'],'rightKey':'0'},
				{'title':['C罗曾为身患那种疾病的小患者改过发型，并引起时尚潮流？'],'answer':['A、白内障','B、白血病', 'C、脑部畸形', 'D、腿部残疾'],'rightKey':'2'},
				{"title":['以下哪个品牌由C罗代言？'],'answer':['A、清扬','B、金嗓子', 'C、王老吉', 'D、苹果'],'rightKey':'0'},
				{"title":['C罗儿子的别名是？'],'answer':['A、小C罗','B、小小罗', 'C、J罗', 'D、迷你罗'],'rightKey':'3'},
			];
			
			
			var number= Math.floor(Math.random()*10);//生成0-9的随机数
   			
   			//设置题目
   			$(".page5 .title span").text(subject[number].title);
   			//设置答案
   			for(var i=0;i<$(".page5 .answer-box").length;i++){
   				$(".page5 .answer-box").eq(i).find("label").text(subject[number].answer[i])
   			}
   			//设置图片
   			$(".page5 .imgs").attr("src",imgArry[number]);
			
			$(window).load(function(){
				//选择答案
				$(".mf-checkbox").click(function(){
					var p_sib = $(this).parent(".answer-box").siblings().find(".mf-checkbox");
					//选中样式
					$(this).addClass("check");
					p_sib.removeClass("check");
					//选中radio
					$(this).siblings("input[type='radio']")[0].checked=true;
				});
				
				//跳转到活动提要
				$(".page3 .returnPage").click(function(){
					mySwiper2.slideNext();
				});
				
				//跳转到问答
				$(".page4 .returnPage").click(function(){
					mySwiper2.slideNext();
				});
				
				
				//关闭
				$(".layer-close").click(function(){
					$(".share-arrow,.layer-box").removeClass("show");
					$(".layer-bg").delay(200).fadeOut(400);
				});
				
				//提交答案
				$(".page5 .returnPage").click(function(){
					var layer_text="点击右上角分享<br>告知大家一起参与";
					if($("input[name='answer']:checked").val() == '' 
                            || $("input[name='answer']:checked").val() == 'undefined'
                            || $("input[name='answer']:checked").val() == undefined) {
						layer_text="请您先选择答案!";
						$(".layer-box").addClass("show").find("span").html(layer_text);
						$(".layer-bg").fadeIn(500);
						return;
					}
					if($(".nick-name input").val()==''){
						layer_text="请您先填写昵称!";
						$(".layer-box").addClass("show").find("span").html(layer_text);
						$(".layer-bg").fadeIn(500);
						return;
					}
					
					if($("input[name='answer']:checked").val()!=subject[number].rightKey&&$(".nick-name input").val()!=''){
						$(".mf-checkbox").removeClass("check")
						$("input[type='radio']").removeAttr("checked");
						layer_text="很遗憾，回答错误<br>请重新回答!";
						$(".layer-box").addClass("show").find("span").html(layer_text);
						$(".layer-bg").fadeIn(500);
						
						//回答错误,重新设置题目
						number= Math.floor(Math.random()*10);//生成0-9的随机数
						//设置题目
			   			$(".page5 .title span").text(subject[number].title);
			   			//设置答案
			   			for(var i=0;i<$(".page5 .answer-box").length;i++){
			   				$(".page5 .answer-box").eq(i).find("label").text(subject[number].answer[i])
			   			}
			   			//设置图片
			   			$(".page5 .imgs").attr("src",imgArry[number]);
			   			return;
					}
					
					if($("input[name='answer']:checked").val()==subject[number].rightKey&&$(".nick-name input").val()!=''){
						$.ajax({
                            type : "GET",
                            async : false,
                            dataType : "JSON",
                            cache : false,
                            url : "../questionnaire.do",
                            data:{
                              "nickName":$(".nick-name input").val(),
                              "answer":$("input[name='answer']:checked").val()
                            },
                            success : function(data) {
                            	//显示分享弹窗
        						layer_text="回答正确！<br>点击右上角分享<br>告知大家一起参与";
        						$(".layer-box span").html(layer_text);
        						$(".share-arrow,.layer-box").addClass("show");
        						$(".layer-bg").fadeIn(500);
                            }
                        });
					}
				})
				
			});
		</script>
        
        
        <!-- 音乐-->
        <script type="text/javascript">
			function play_music(){
			if ($('#mc_play').hasClass('on')){
				$('#mc_play audio').get(0).pause();
				$('#mc_play').attr('class','stop');
			}else{
				$('#mc_play audio').get(0).play();
				$('#mc_play').attr('class','on');
			}
			$('#music_play_filter').hide();
			event.stopPropagation(); //阻止冒泡 
		}
		function just_play(id){
			$('#mc_play audio').get(0).play();
			$('#mc_play').attr('class','on');
			if (typeof(id)!='undefined'){
				$('#music_play_filter').hide();
			}
			event.stopPropagation(); //阻止冒泡 
		} 
		function is_weixn(){
			return false;
			var ua = navigator.userAgent.toLowerCase();
			if(ua.match(/MicroMessenger/i)=="micromessenger") {
				return true;
			} else {
				return false;
			}
		}
		var play_filter=document.getElementById('music_play_filter');
		play_filter.addEventListener('click', function(){
			just_play(1);
		});
		play_filter.addEventListener('touchstart', function(){
			just_play(1);
		});
		play_filter.addEventListener('touchend', function(){
			just_play(1);
		});
		play_filter.addEventListener('touchmove', function(){
			just_play(1);
		});
		play_filter.addEventListener('mousedown', function(){
			just_play(1);
		});
		play_filter.addEventListener('mouseup', function(){
			just_play(1);
		});
		play_filter.addEventListener('mousemove',function(){
			just_play(1);
		});
		window.onload=function(){
			if (!is_weixn()){
				just_play();
			}
		} 
		</script>
	</body>
</html>